<template>
  <div class="person">
    <h2>汽车信息: 一辆{{ car.brand }}车, 价格{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车价格</button>
    <br>
    <h2>游戏列表:</h2>
    <ul>
      <li v-for="item in games" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="changeFirstName">修改第一个游戏的名字</button>
    <hr>
    <h2>{{obj.a.b.c}}</h2>
    <button @click="changeObj">测试</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import {reactive} from 'vue'

let car = reactive({
  brand: "奔驰",
  price: 100
})
let games = reactive([
  {id: '001', name: "王者"},
  {id: '002', name: "原神"},
  {id: '003', name: "拳皇"}
])
let obj = reactive({
  a: {
    b: {
      c: 666
    }
  }
})

function changePrice() {
  car.price += 10;
}

function changeFirstName() {
  games[0].name = '888'
}
function changeObj() {
  obj.a.b.c = 999
}
</script>


<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>